Add Generic Header component#7061
Conversation
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
📋 StatsFile sizes
No changes to module sizes. Action run for 0b2837c |
| @include base.govuk-font($size: 16, $line-height: 1); | ||
|
|
||
| // Add a transparent bottom border for forced-colour modes | ||
| border-bottom: 1px solid transparent; |
There was a problem hiding this comment.
This will effectively make the header's padding bottom bigger so it might be that the padding should be adjusted for the generic header?
There was a problem hiding this comment.
What if I tried to maintain the generic nature of the padding by adding something like govuk-spacing(3) - 1px to account for that invisible border?
There was a problem hiding this comment.
Yeah I'm thinking the 'magic' that's in the gov.uk logo is probably some part based on this border here and then a few pixels just down to the logo itself.
There was a problem hiding this comment.
After playing around with this it's a bit trickier than I thought. If I take away a px from the bottom padding, it means that now the logo is no longer 60px in height like the GOV.UK header (61px with that border). If I add a px to the top then by my eye it looks top heavy:
Looking at it again with 15px top and 15px bottom, functionally 16px bottom... I think it looks ok?
This might be a line height thing. Either way I've run this past @mia-allers-gds and she's happy with it staying as is. I'll again make a note of this during testing to see if it comes up again with other dept logos.
| {% block pageTitle %}HM Pizza Finder{% endblock %} | ||
|
|
||
| {% set logoContent %} | ||
| <svg width="28" height="30" viewBox="0 0 28 30" fill="none" xmlns="http://www.w3.org/2000/svg"> |
There was a problem hiding this comment.
| <svg width="28" height="30" viewBox="0 0 28 30" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <svg width="28" height="30" viewBox="0 0 28 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> |
If we set the svg to current color and remove the fill attribute from the circles it'll change colour alongside the text, for example, when the link is focused
There was a problem hiding this comment.
Also less important but you can remove transforms and save a few bytes by doing this:
5 participants
Note
This PR is ready for review but should not be merged until we've written guidance
Change
Adds a new component: the Generic Header; a stripped back version of the GOV.UK Header for use by GOV.UK-adjacent services.
As well as adding the component, this PR changes the scaffolding of the GOV.UK Header to consume the styling and markup of the Generic Header so that both components share how they're constructed whilst continuing to be separate. Specifically:
govuk-header-stylesfor the root blockgovuk-header-logo-stylesfor logo area padding andbox-sizing: border-boxgovuk-header-link-stylesfor the logo link state styling ie: hover and focusCloses #7057
Notes
The Generic header uses rounded 15px top and bottom padding, as opposed to the GOV.UK Header's magic numbers, to give users some padding to work with rather than no spacing at all. The plan is to recommend in guidance to adjust the spacing via component extension if they need to for their logos and domain/service names1.
I've removed the
word-spacingrule from the Generic Header link element (and added it back in for the GOV.UK Header) which removes spacing from the root of the link element to help with spacing because I was finding for the Generic Header that it would mean users couldn't put text straight into the component'slogoparam. It's not clear to me if we should keep this for everything and ensure users are using child elements when adding logo html to the Generic Header.Both headers have their own
__container--full-widthelement modifier. It's unclear to me how wasteful this is or if both components should share one class and if so, where it would go. This could be a helper class however the thing itself is a component-level style so it's not clear where the best place for this is.Whilst the test suites of both headers now look very similar, I think it makes sense to keep them as they are to make sure that their different contexts aren't resulting in unexpected behaviours.